W18_後端框架 Express + Sequelize

本文為 Lidemy 程式導師計畫第十八週學習內容，主要使用後端框架做出一個餐廳網站，以下記錄整個實作過程。

零、讀書計畫

1. 作業概覽

移植 W6-W8 的餐廳網站到 Express 上面，加上後台，有抽獎跟管理菜單的頁面，本週推薦部署到自己買的主機上面。

hw1: 用 Express 打造一個餐廳網站還有餐廳後台，但應該會有大部分的資源都可以沿用之前的作業。

hw2: 餐廳網站 menu 頁面

前台新增「我要點餐」那頁，包含以下：

1. 名稱

2. 價格

3. 圖片

後台新增可以管理餐點品項的頁面，包含以下功能：

1. 新增品項

2. 刪除品項

3. 編輯品項

上傳圖片的部分請參考 week17 的延伸挑戰題，如果上傳圖片不好做的話，也可以改成填入圖片網址就好。

hw3: 餐廳網站常見問題後台

做個後台可以管理常見問題列表，然後在前台的部分動態載入這些資料。

1. 身為一個管理員，我希望常見問題的內容可以儲存在資料庫，這樣我才能方便修改

2. 身為一個管理員，我希望管理後台可以管理常見問題，這樣我才能方便修改

3. 身為一個管理員，我希望在後台可以新增常見問題，會有標題跟內容以及順序

4. 身為一個管理員，我希望在後台可以編輯常見問題，包括標題跟內容以及順序

5. 身為一個管理員，我希望在後台可以刪除常見問題

6. 身為一個管理員，我希望前端頁面的資料是從後端拿的，這樣才能跟後台連動

hw4: 簡答題

1. 什麼是反向代理（Reverse proxy）？

2. 什麼是 ORM？

3. 什麼是 N+1 problem？

2. 預計花費時間： 50 小時

開始時間：2/4，結束時間：2/11

實際時間：2/9，結束時間：2/17，總共九天，大概四十小時

hw1: 三天 21 hrs

hw2: 一天 7hrs

hw3: 一天 7hrs

我覺得這個網站可以變成一個作業就好，大概三四天做完差不多？

hw4: 1hr -> 差不多一小時，除了 N+1 problem 花了一點時間理解以外，其他的題目在影片中可以找到解答。

部署：一天 7hrs -> 才怪，部署大魔王就在這裡，就算是十四週部署過了，物換星移一切還是不一樣，卡卡卡爆了，抱著棉被痛哭了三天，最後真的只好先放著。

W18 直播檢討 79 mins

3. 讀書行動

預計實作事項：

實際流程：

MTR 導讀 — W18

W18 沒有新的東西，基本上跟 W17 一樣，就是在多練習一次，但如果說要加上挑戰題跟超級挑戰題，可以練習「購物車」、「訂單以及 email 通知」、「結帳串接金流」的部分。

W18 作業介紹裡面，有說到 API，用 res.json() 就可以拿到 json 格式的資料，奇怪，那我在 W17 的時候怎麼會忽略了呢，哎呀呀。

看 W18 直播檢討

實作需要的時間

4. 自我檢測

• P1 我能夠從頭把一個網站獨立建起來

• P1 我知道如何部署 Node.js 的網站到自己的主機

• P2 我知道如何使用 Nginx

• P2 我知道如何使用 PM2

5. 學前關鍵字：Nginx、PM2、上傳圖片、反向代理（Reverse proxy）、N+1 problem

一、筆記內容

1. 用 Express & Sequelize 做一個餐廳網站

2. PM2、Nginx & Reverse Proxy Server

3. AWS EC2 + LAMPP + Nodejs + Nginx 部署失敗過程紀錄

4. 反向代理（Reverse proxy）、ORM 及 N+1 problem 介紹

二、W18 直播檢討

W18_直播檢討

三、心得與心態調整

拖延症又犯了，好像一直不想開始，所以不想開始的原因是什麼？

是覺得作業很難，還是累了？我也不知道，總之騙自己沒有要開始做作業，我只是要規劃餐廳路由而已。結果這樣就真的開始了，恩騙自己真好，哈哈哈。

還是覺得學到很多東西，就算是 AWS 沒有部署成功，但是我紮實的知道了環境變數要怎麼設定，也重新複習了一次部署的流程。

四、其他

如何在 Mac 上印出文字版的資料夾結構

利用 dotenv 套件，設置在 Node.js 裡面的環境變數

Debug: Aws connection problem

相見恨晚的 chrome 插件 — Octotree - GitHub code tree

Git error -> fatal: the remote end hung up unexpectedly